<template>
	<view class="folder" :class="APPTheme">
		<uni-nav-bar fixed status-bar left-icon="back" :color="APPTheme=='theme-light'?'#000000':'#ffffff'" :background-color="APPTheme=='theme-light'?'#ffffff':'#000000'"
		 @clickLeft="$lizhao.lznavigate.lzNavigateBack()">
			<view slot="left">返回</view>
			<view slot="right">
				<view class="r-warp">
					<view class="r-left" @click="navigetToUpload">
						<uni-icons type="cloud-upload-filled" size="20" :color="APPTheme=='theme-light'?'#000000':'#ffffff'" @click="navigetTo('上传列表')"></uni-icons>
						<u-badge :offset="[10,-25]" type="error" :count="lzuploadFile.length"></u-badge>
					</view>
					<uni-icons type="trash" size="20" :color="APPTheme=='theme-light'?'#000000':'#ffffff'" @click="navigetTo('回收站')"></uni-icons>
				</view>
			</view>
		</uni-nav-bar>
		<view class="top-center">
			<view class="h4">{{transmission&&transmission.filingName}}</view>
			<view class="c-text" v-if="transmission.parentId=='-1'&&transmission.filingType=='0'" @click="authorManageFn">权限管理:<text>{{author.administration+author.editUpload+author.seeLength}}人</text></view>
		</view>
		<lz-input icon="search" :size="18" rightText="" placehold="搜索" class="lz-input" @click="searchFn"></lz-input>
		<view class="center" id="mescrollCenter">
			<mescroll-item ref="mescrollItem0" :i="0" :index="0" :otherData="transmission" :scrollHeight="selectInfoHeight" :showCheckbox="showCheckbox" footerBotttom="0px"></mescroll-item>
		</view>
		<!-- 悬浮球 只要不是查看权限2就出现
		// roleType//0是管理者权限，1为上传/编辑权限，2为查看权限
		 -->
		<view class="float-btn" @click="addenclosure" v-if="transmission.filingCabinetsRole.roleType!='2'">
			<hover-ball type="plusempty" color="#fff" size="26"></hover-ball>
		</view>
		<!-- 新建 -->
		<uni-popup ref="popupShare" type="bottom" style="z-index: 1000;">
			<uni-popup-share title="新 建" @select="selectPopup" :APPTheme="APPTheme" :filingType="transmission.filingType"></uni-popup-share>
		</uni-popup>
		<!-- 对话框 -->
		<uni-popup ref="dialogInput" type="dialog">
			<uni-popup-dialog mode="input" title="新建文件夹" placeholder="请输入新建文件夹命名" type="error" @confirm="dialogInputConfirm" ></uni-popup-dialog>
		</uni-popup>
		<!-- 量子上传 -->
		<lz-file ref="lFile" @up-success="QSSupSuccess" top="75px"></lz-file>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	let that
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import MescrollItem from "../components/mescroll-more-item/mescroll-more-item.vue";
	export default {
		components: {
			uniPopupShare,
			uniPopupDialog,
			MescrollItem
		},
		data() {
			return {
				showCheckbox:false,//是否开启多选功能
				//传过来的值
				transmission: null,
				selectInfoHeight:'',//节点信息高度
				// 权限管理
				author:{
					administration:0,//谁可以管理人数
					editUpload:0,//谁可以编辑/上传人数
					seeLength:0,//谁可以查看人数
				},
			}
		},
		computed: {
			...mapGetters(['APPTheme', 'userInfo', 'api','lzuploadFile']),
		},
		onLoad(e) {
			that = this
			that.transmission = JSON.parse(e.option)
			console.log(that.transmission);
			that.$nextTick(function(){
				//获取节点信息
				that.createSelectorQuery()
			})
			//监听新建文档成功
			uni.$off('selecTemplateOfficeBack')
			uni.$on('selecTemplateOfficeBack',(res)=>{
				//主动刷新
				that.$refs.mescrollItem0.triggerDownScroll()
			})
			//判断是否启用多选功能（是否有移动删除权限，只有管理者权限可以）
			that.checkboxFn()
		},
		onShow() {
			that = this
			//设置主题颜色
			that.GLOBAL.setThemeColor(that.APPTheme)
			//获取文件夹权限人数
			that.filingCabinetsRole_getSize()
		},
		methods: {
			...mapActions(['set_lzfileList','remove_lzfileList']),
			//调用文件管理系统选取文件进行量子加密
			documentManagementSystem(){
				console.log(that.transmission);
				/*
				选择文件并上传传入额外参数
				*/
				that.$refs.lFile.upload({
					filingType:2,//加密盘
					parentId:that.transmission.id,//所属文件夹id
					uploadType:0,//0为文件柜，量子文件上传，1为邮箱，量子文件上传
				});
			},
			//附件上传成功回调
			QSSupSuccess(e){
				//主动刷新
				that.$refs.mescrollItem0.triggerDownScroll()
			},
			//判断是否启用多选功能（是否有移动删除权限，只有管理者权限可以）
			checkboxFn(){
				if(that.transmission.filingCabinetsRole.roleType=='0'){//管理者权限
					that.showCheckbox=true
				}
			},
			//获取文件夹权限人数
			filingCabinetsRole_getSize(){
				let req={
					filingId:that.transmission.id,//文件柜id
				}
				that.GLOBAL.doGet(that.api.GLOBAL_admin_rest_biz_filingCabinetsRole_getSize,req).then(res=>{
					if(res.code=='0'&&res.data){
						that.author.administration=res.data.administration
						that.author.editUpload=res.data.editUpload
						that.author.seeLength=res.data.seeLength
					}
				})
			},
			//点击权限管理
			authorManageFn(){
				// roleType//0是管理者权限，1为上传/编辑权限，2为查看权限 
				if(that.transmission.filingCabinetsRole.roleType!='0'){
					uni.showToast({
						title: '你不是管理者，无法修改权限',
						icon:"none"
					});
					return
				}
				uni.navigateTo({
					url: '/pages/document/folderProperties/folderProperties?option='+JSON.stringify(that.transmission),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//点击加号
			addenclosure(){
				this.$refs.popupShare.open()
			},
			//点击搜索
			searchFn(){
				
			},
			//选择底部弹出item
			selectPopup(e){
				this.$refs.popupShare.close()
				if(e.item.text=='文档'||e.item.text=="表格"){
					uni.navigateTo({
						url: '../selecTemplateOffice/selecTemplateOffice?type='+e.index+'&filingType='+that.transmission.filingType+'&parentId='+that.transmission.id,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}else if(e.item.text=='文件夹'){//新建文件夹
					that.$refs.dialogInput.open()
				}else if(e.item.text=='上传'){//选取图片
					//filingType0共享盘1私人盘2加密盘
					if(that.transmission.filingType==2){//加密盘
						//调用文件管理系统选取文件
						that.documentManagementSystem()
					}else{
						//只选择上传图片
						that.chooseImage()
					}
				}
			},
			//确认新建文件夹
			dialogInputConfirm(fn,item){
				console.log(item);
				let req={
					fileType:0,//文件类型文件夹
					filingName:item,//文件柜名称
					filingType:that.transmission.filingType,//文件柜类型
					parentId:that.transmission.id,//文件夹id
				}
				that.GLOBAL.doPost(that.api.GLOBAL_admin_rest_biz_filingCabinets_save,req).then(res=>{
					that.$refs.dialogInput.close()
					if(res.code=='0'&&res.data.flag){
						uni.showToast({
							title: res.data.msg,
							icon:"success"
						});
						//主动刷新
						that.$refs.mescrollItem0.triggerDownScroll()
					}else{
						uni.showToast({
							title: res.data.msg,
							icon:"none"
						});
					}
				})
			},
			//点击菜单
			navigetTo(name){
				if(name=='回收站'){
					uni.navigateTo({
						url: '/pages/document/recycleBin/recycleBin',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			//选取图片
			chooseImage(){
				let that=this
				uni.chooseImage({
				    count: 9, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
						res.tempFiles.forEach(item=>{
							//图片上传
							that.uploadFile(item)
						})
				    }
				});
			},
			//图片上传
			uploadFile(item){
				let uuid=that.$lizhao.guid(32)
				let formMate={
					inputType:'wps',
					parentId:that.transmission.id,
					filingType:that.transmission.filingType,//0共享盘1私人盘2加密盘
					fileType:3//0文件夹,1word,2excl,3图片
				}
				that.GLOBAL.uploadFile(that.api.GLOBAL_admin_rest_sys_upload_fileUpload,item.path,formMate,function(uploadTask){
					//监听上传进度
					let file={
						file:item,
						uuid:uuid,
						uploadTask:uploadTask
					}
					//存储上传列表
					that.set_lzfileList(file)
				}).then(res=>{
					//上传成功，移除vuex当前文件
					that.remove_lzfileList(uuid)
					//主动刷新
					that.$refs.mescrollItem0.triggerDownScroll()
				})
			},
			//上传列表
			navigetToUpload(){
				uni.navigateTo({
					url: '/pages/document/fileUpload/fileUpload',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//获取节点信息
			createSelectorQuery(){
				const query = uni.createSelectorQuery().in(this);
				query.select('#mescrollCenter').boundingClientRect(data => {
				  console.log("得到布局位置信息" + JSON.stringify(data));
				  that.selectInfoHeight=data.height+'px'
				}).exec();
			},
			
		}
	};
</script>

<style scoped lang="scss">
	.folder {
		height: 100%;display: flex;flex-direction: column;
		
		.r-warp{
			display: flex;align-items: center;justify-content: space-between;
			.r-left{
				position: relative;margin-right: 20px;margin-left: 15px;
			}
		}
		.center{
			flex: 1;
		}
		.top-center{
			font-size: 12px;margin:15px 20px 0;
			.h4{
				font-weight: bold;font-size: 16px;
			}
			.c-text{
				color: #007AFF;line-height: 30px;
			}
		}
		.lz-input{margin: 0 20px;}
	}
</style>
